<template>
	<view class="background">
		<scroll-view scroll-y style="height: 100%">
			<view
				v-for="(order, orderIndex) in orderList"
				:key="orderIndex" 
				class="order_item">
				<view class="order_item_head">
					<view class="order_time">
						<image 
							src="../../static/icon_time_gray.png" 
						/>
						<text>{{order.fromTime}}</text>
					</view>
					<text 
						:style="{'color': orderState[order.carNum ? 1 : 2].color}">
						{{orderState[order.carNum ? 1 : 2].lable}}
					</text>
				</view>
				<view class="order_info">
					<view class="order_info_item">
						<text>{{order.fromCity}}</text>
						<image src="../../static/icon_router_target.png" style="width: 40upx; height: 40upx; margin: 0 10upx;"></image>
						<text>{{order.endCity}}</text>
					</view>
					<view class="order_info_item" style="height: 50upx;">
						<text 
							space="ensp"
							style="font-size: 30rpx; color: #949699; margin-left: 10upx;">
							{{`车牌号: ${order.carNum}`}}
						</text>
					</view>
					<view class="order_info_item" style="height: 50upx;">
						<text 
							space="emsp"
							style="font-size: 30rpx; color: #949699; margin-left: 10upx;">
							{{`司 机: ${order.driverName} ${order.driverPhone}`}}
						</text>
					</view>
					<view class="order_info_item" style="height: 50upx;">
						<text 
							space="ensp"
							style="font-size: 30rpx; color: #949699; margin-left: 10upx;">
							{{`购票人数: ${order.sumSeat}人`}}
						</text>
					</view>
				</view>
				<view class="order_item_btn_warp">
					<view
						@click.stop="cancel(order)"
						v-if="!order.carNum"
						class="rder_item_btn" 
						style="border-color: #FF603F; color: #FF603F;">
						<text>派车</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<lb-picker 
			ref="picker" 
			mode="selector" 
			@confirm="confirmPicker" 
			:value="pickerValue" 
			:list="carList" />			
	</view>
</template>

<script>
	var openid;
	import LbPicker from '@/components/lb-picker'
	import api from '../../api';
	export default {
		data() {
			return {
				pickerValue:'',
				show:true,
				cur:0,
				tab:[
					{text:'待支付',state:1},
					{text:'待出行',state:5},
					{text:'已完成',state:6},
					{text:'已取消',state:7},
					{text:'已退款',state:11},
				],
				orderList: [],
				carList:[],
				cList:[],
				item:'',
				orderState: {
					1: { color: '#18C47C', lable: '已派车'},
					2: { color: '#FF603F', lable: '未派车'},
				} 
			}
		},
		components: {
		  LbPicker
		},
		onLoad(option) {
			this.scheduleDetailId = option.scheduleDetailId
			this.getOrderList(option.scheduleDetailId)
			
		},
		methods: {
			confirmPicker({ index, item, value, change }){
				let data = this.cList.find(v=>v.id==item.value)
				this.updateScheduleDetail(data.currDriverId,data.id)
			},
			updateScheduleDetail(driverId,carId){
				api.order.updateScheduleDetail({driverId,carId,id:this.item.id}).then(res=>{
					if(res.code == 200) {
						uni.showToast({
							title:"派车成功",
							icon:"none"
						})
						this.getOrderList(this.scheduleDetailId)
					}
					else {
						uni.showToast({
							title: res.msg,
							duration: 3000,
							icon: 'error'
						});
					}
				})
			},
			checkCarId(value){
				this.cList.forEach(v=>{
					if(v.id == value){
						return v
					}
				})
				// return ''
			},
			tabClick(index){
				this.cur = index
				uni.showLoading({
					title:'加载中'
				})
				this.getOrderList(this.tab[index].state)
			},
			toLogin(){
				uni.navigateTo({
					url:'/pages/auth/index'
				})
			},
			checkToken(){
				if(uni.getStorageSync("token")){
					return true
				}
				return false
			},
			backMoney(orderId) {
				let that = this;
				uni.showModal({
					content: '确定要退款吗？',
					success(res) {
						api.order.refundById({ orderId }).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: '退款成功',
									duration: 1500,
									icon: 'none'
								});
								that.getOrderList(5);
							} else {
								uni.showToast({
									title: res.msg,
									duration: 3000,
									icon: 'none'
								});
							}
						});
					}
				});
			},
			cancel(item){
				let that = this
				this.item = item
				api.order.getCarList({carTypeId:item.carTypeId}).then(res=>{
					if(res.code == 200) {
						// uni.hideLoading()
						// uni.showToast({
						// 	title:'上车成功'
						// })
						// that.getOrderList(that.scheduleDetailId)
						this.carList = []
						that.cList = res.data
						res.data.forEach(v=>{
							this.carList.push({label:v.carNum+" "+v.driverName,value:v.id})
						})
						that.$refs.picker.show() // picker1显示
					}
					else {
						uni.hideLoading()
						uni.showToast({
							title: res.msg
						})
					}
				})
			},
			toDetail(item){
				console.log(item);
				uni.navigateTo({
					url:'/pages/order/order-detail?item='+JSON.stringify(item)
				})
			},
			checkState(state){
				if(state==1){
					return '待支付'
				}else if(state == 2){
					return '已支付'
				}else if(state == 5){
					return '待出行'
				}else if(state == 6){
					return '已出行'
				}else if(state == 7){
					return '已取消'
				}else if(state == 9){
					return '退款中'
				}else if(state == 10){
					return '退款成功'
				}else if(state == 11){
					return '取消退款'
				}
			},
			getDate(index){
				var time = new Date().getTime()+parseInt(index)*86400000;
				var date= new Date(time).toLocaleString().replace(/\//g,'-').split(" ")[0].toString();
				// console.log(this.getWeek(new Date(date)));
				return this.formatDate(time).substr(0,11);
			},
			formatDate(date) {
			  var date = new Date(date);
			  var YY = date.getFullYear() + '-';
			  var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			  var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
			  var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			  var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			  var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
			  return YY + MM + DD +" "+hh + mm + ss;
			},
			getOrderList(scheduleDetailId){
				this.orderList = []
				this.show = false
				// api.route.pageQueryByUserId({ startDate:'2021-10-18 00:00:00',endDate:'2021-10-19 23:59:59',pageNo:1,pageSize:100}).then(res=>{
					
				// })
				console.log(this.getDate(0));
				api.order.pageScheduleDetail({pageNo:1,pageSize:100,startDate:this.getDate(0)+' 00:00:00',endDate:this.getDate(1)+' 23:59:59'}).then(res=>{
					if(res.code ==200){
						this.orderList = res.data.list
					}
				}).finally(res=>{
					uni.hideLoading()
					this.show = true
				})
			},
			payOrder(scheduleDetailId) {
				api.order.payOrder({scheduleDetailId,orderType:1}).then(res=>{
					if(res.code ==200){
						let data = res.data
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timeStamp,
							nonceStr:data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success: (res) => {
								console.log("weixinorder");
								console.log(res);
								// 跳转订单管理
								uni.reLaunch({
									url: '../order/order'
								});
							},
							fail: (res) => {
								// 跳转订单管理
								uni.reLaunch({
									url: '../order/order'
								});
							}
						});
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.background{
		background-color: #f0f0f0;
		height: 100%;
		.order_item {
			background: #FFFFFF;
			border-radius: 16upx;
			padding: 20upx 20upx 0 20upx;
			margin: 10upx 20upx 0 20upx;
			.order_item_head {
				display: flex;
				height: 80upx;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				border-bottom: solid 1upx #EFEFEF;
				.order_time {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					font-weight: 100;
					line-height: 30upx;
					color: #949699;
					image {
						width: 30upx;
						height: 30upx;
						margin-right: 10upx;
					}
				}
				text {
					font-size: 30rpx;
					color: #949699;
					font-weight: bold;
				}
			}
			.order_info {
				.order_info_item {
					display: flex;
					flex-direction: row;
					align-items: center;
					height: 75upx;
					.site_sign {
						width: 20upx;
						height: 20upx;
						border-radius: 50%;
					}
				}
			}
			.order_item_btn_warp {
				margin-top: 10upx;
				display: flex;
				flex: row;
				flex-direction: row-reverse;
				height: 100upx;
				align-items: center;
				border-top: dashed 1upx #949699;
				.rder_item_btn {
					width: 180upx;
					height: 70upx;
					border-radius: 16upx;
					border-style: solid;
					border-width: 1upx;
					line-height: 70upx;
					font-size: 34rpx;
					text-align: center;
					margin-left: 10upx;
				}
			}
		}
	}
</style>
